<template>
  <el-dialog title="上传头像" :visible.sync="visible" :append-to-body="true" width="450px">
    <el-upload class="upload-demo" drag :action="uploadImg()" :on-success="handleAvatarSuccess" multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </el-dialog>

</template>


<script>
  /* eslint-disable */
  export default {
    data() {
      return {
        visible: false,
        avatarUrl: ''
      }
    },
    computed: {
      id: {
        get() {
          return this.$store.state.user.id
        },
        set(val) {
          this.$store.commit('user/updateId', val)
        }
      },
      account: {
        get() {
          return this.$store.state.user.account
        },
        set(val) {
          this.$store.commit('user/updateAccount', val)
        }
      }
    },
    methods: {
      init() {
        this.visible = true
      },
      uploadImg() {
        return this.$http.adornUrl('/file/image');
      },
      handleAvatarSuccess(response) {
        if (response.success) {
          this.avatarUrl = response.data

          this.$message.info(response.message)
        }else{
          this.$message.error(response.message)
        }
        console.log("handleAvatarSuccess", response);
      },
      dataFormSave() {
        this.$http({
          url: this.$http.adornUrl('/teacher/editTeacherAvatar'),
          method: 'get',
          params: this.$http.adornParams({
           'id': this.id,
           'updateBy': this.account,
           'avatarUrl': this.avatarUrl
          })
        }).then(({
          data
        }) => {
          if (data.success) {
            this.$message({
              message: '数据保存成功!',
              type: 'success'
            });
            this.visible = false
            this.$emit('refreshDataList')
          } else {
            this.$message.error(data.message)
          }
        })
      },
    }
  }
</script>

<style lang="scss">
  .btn {
    margin-left: 100px;
  }
</style>
